<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="导入日期">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          format="yyyy-MM-dd"
          :clearable="false"
          value-format="timestamp"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="imports">导入</el-button>
        <el-button type="primary" @click="onSubmit" id="monitorEnter">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="recordList" border>
      <el-table-column align="center" width="50" type="index" label="序号"></el-table-column>
      <template v-for="colConfig in colConfigs">
        <el-table-column align="center" v-bind="colConfig" :key="colConfig.id"></el-table-column>
      </template>
    </el-table>
    <el-pagination
      background
      style="margin-top:15px;"
      layout="total, sizes, prev, pager, next"
      :current-page="formInline.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="formInline.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import utils from "@/common/utils";
import api from "@/api/apiPath";
export default {
  name: "importRecord",
  data() {
    return {
      recordList: [],
      formInline: {
        beginTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10
      },
      time: [],
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      colConfigs: [
        { prop: "batchNum", label: "批次号" },
        { prop: "fileName", label: "文件名" },
        { prop: "recordNum", label: "导入记录数量" },
        { prop: "earliestTime", label: "支付记录开始时间" },
        { prop: "latestTime", label: "支付记录结束时间" },
        { prop: "operator", label: "导入人" },
        { prop: "operatorTime", label: "导入时间" }
      ]
    };
  },
  created() {
    this.list();
  },
  methods: {
    list() {
      this.$axios.post('/raise/dealingOpposingOrder/selectImportRecord',this.formInline).then(res => {
        for (let item of res.list) {
          item.earliestTime = utils.getTimeString(item.earliestTime);
          item.operatorTime = utils.getTimeString(item.operatorTime);
          item.latestTime = utils.getTimeString(item.latestTime);
        }
        this.recordList = res.list;
        this.total = res.total;
      });
    },
    handleSizeChange(size) {
      this.formInline.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.formInline.pageNum = page;
      this.list();
    },
    onSubmit() {
      this.formInline.beginTime = this.time[0] || '';
      this.formInline.endTime = this.time[1] || '';
      this.formInline.pageNum = 1;
      this.list();
    },
    imports() {
      this.$router.push('./importFile')
    }
  }
};
</script>

<style scoped>
</style>